<template>
  <div class="staffinfo">
    <div class="too_body" v-if="this.$store.getters.imShowId.substring(0, 2).toLowerCase() != 'tw'">
      <span>
        <i class="el-icon-warning" style="color: #FF6332; padding-right: 8px;font-size: 15px;"></i>
      <span class="col4f5">检测到您为厂商客户，仪会通员工个数及角色权限与仪信通会员一致，具体可使用账号数受仪信通会员级别影响，若要设置角色及管理更多仪信通权限，请前往仪信通后台</span>
      </span>
      <span>
        <!-- <span class="mn_butn pr16" type="text">设置角色</span>
        <span class="mn_butn" type="text">了解仪信通</span> -->
      </span>
    </div>
    <div class="staff-nav">
      <span>
        <el-button type="primary" @click="getChangeTem('isAddStaff')"><i class="el-icon-plus" />添加员工</el-button>
      <span style="margin-left: 15px;color: #7E8790;">替换超级管理员请前往公司设置</span>
      </span>
     
      <div class="nav-option" v-if='this.$store.getters.imShowId.substring(0,2).toLowerCase()!="tw"'>
        <span class="option-name">员工数量</span>
        <div class="option-progress" >
          <el-progress style="width: 200px;" :percentage="countObj.percentage" :show-text="false" />
          <span class="progress-num">{{ countObj.consumeCount }}/{{ countObj.permissionCount }}</span>
        </div>
        <!-- <el-link type="primary" :underline="false" @click="additionalPurchase">购买</el-link> -->
      </div>
    </div>
    <!-- <div class="staff-search">
      <p class="search-tip">您可自定义角色请前往角色管理设置，超级管理员仅能更改默认为注册账号的操作人</p>
      <div class="flex search-input">
        <el-input v-model="searchParams.text" class="w270" placeholder="请输入员工手机号" size="small" />
        <el-button size="small" @click="getList">搜索</el-button>
      </div>
    </div> -->
    <el-table
        :data="tableData"
        style="width: 100%"
    >
      <el-table-column
          prop="mobile"
          label="员工账号"
          width="180"
      />
      <el-table-column
          prop="nickname"
          label="备注名"
          width="180"
      />
      <el-table-column
          prop="roleName"
          label="角色"
      />
      <el-table-column
          prop="address"
          label="掌上仪信通是否激活"
          align="center"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.isActivation ? '是' : '否' }}</span>
        </template>
      </el-table-column>
      <el-table-column
          prop="email"
          label="邮箱"
          align="center"
      />
      <el-table-column
          prop="address"
          label="状态"
          align="center"
      >
        <template slot-scope="scope">
          <span :class="scope.row.isDeleted == 0 ? 'state green' : 'state red'">{{ scope.row.isDeleted == 0 ? '已启用' : '未启用' }}</span>
        </template>
      </el-table-column>
      <el-table-column
          prop="user"
          label="添加人"
          width="100px"
          align="left"
      />
      <el-table-column
          prop="address"
          label="操作"
      >
        <template slot-scope="scope">
          <el-button v-if="scope.row.roleId == -1" type="text" size="small" @click="getReplace(scope.row)">更换</el-button>
          <el-button v-if="scope.row.roleId != -1 && scope.row.isDeleted == 0" type="text" size="small" @click="enableAccountInfo(scope.row, 0)">停用</el-button>
          <el-button v-if="scope.row.roleId != -1 && scope.row.isDeleted != 0" type="text" size="small" @click="enableAccountInfo(scope.row, 1)">启用</el-button>
          <el-button v-if="scope.row.roleId != -1" type="text" size="small" @click="getChangeEditTem(scope.row)">编辑</el-button>
          <el-button v-if="scope.row.roleId != -1" type="text" size="small" @click="deleteOption(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <Pagination :total="pageParams.tableTotal" :page.sync="searchParams.page" :limit.sync="searchParams.limit" @pagination="getList" />
    </div>
    <!-- 编辑超级管理员 -->
    <superAdmin v-if="isSuperAdmin" :visible.sync="isSuperAdmin" :boothname="boothDataInfo" @closeEvents="getChangeDialog" />
    <customer ref="KFbody" :title="customerTitle" :member="true" />
    <permission :content="permissionContent" :type-code="permissionTypeCode" :visible.sync="isShowPermission" @closeEvents="permissionClose" />
  </div>
</template>
<script>
import Pagination from '@/components/Pagination/index.vue'
import customer from '@/components/customerDialog/index.vue'
import Cookies from 'js-cookie'
import api from '@/api/index'
export default {
  name: 'StaffInfo',
  components: { Pagination, customer },
  data () {
    return {
      input: '',

      tableData: [],
      pageParams: {
        tableTotal: 0
      },
      searchParams: {
        text: '',
        page: 1,
        limit: 10,
        // imListId:this.$store.getters.companyData.imListId,
        imShowId: this.$store.getters.imShowId,
        imListId: this.$store.getters.imListId.toLowerCase(),
        pathurl: this.$store.getters.imShowId.substring(0, 2).toLowerCase() == 'tw' ? 'twBoss' : 'PtBoss'
      },
      countObj: {},
      isSuperAdmin: false,
      boothDataInfo: {},
      customerTitle: '',
      permissionContent: '',
      permissionTypeCode: '',
      isShowPermission: false
    }
  },
  computed: {
    companyData: function () {
      //console.log(this.$store.getters.companyData)
      return this.$store.getters.companyData
    }
  },
  created () {
    this.getList()
    this.getCompanyUser()
    //console.log('账号' + this.$store.getters.imShowId)
    //console.log(this.$store.getters.imShowId.substring(0, 2).toLowerCase())
  },
  methods: {
    getChangeTem (type) {
      //console.log('aaa')
      //console.log(this.countObj.consumeCount)
      //console.log(this.countObj.permissionCount)
      if (this.countObj.consumeCount - this.countObj.permissionCount >= 0) {
        this.permissionContent = `员工数量不足，目前共有${this.countObj.permissionCount}个权限，已使用${this.countObj.consumeCount}个，如需更多权限，可使用商机点兑换，或联系销售顾问升级会员。`
        this.permissionTypeCode = 'ACCOUNT_LIMIT'
        this.isShowPermission = true
      } else {
        const temState = {
          isStaffIndex: false,
          isAddStaff: type === 'isAddStaff',
          isAddAccount: type === 'isAddAccount',
          isEditStaff: false
        }
        this.$emit('templateChange', temState)
      }
    },
    getChangeEditTem (data) {
      const temState = {
        isStaffIndex: false,
        isAddStaff: false,
        isAddAccount: false,
        isEditStaff: true,
        editDetail: data
      }
      this.$emit('templateChange', temState)
    },
    async getList () {
      const params = this.searchParams
      const { data, total } = await api.boss.queryAccountList(params)
      this.tableData = data
      this.pageParams.tableTotal = total
    },
    deleteOption (data) {
      this.$confirm('确定删除该员工信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await api.boss.delAccountInfo({ id: data.id, imListId: this.searchParams.imListId, pathurl: this.searchParams.pathurl,user:Cookies.get('username') })
        this.$message({ type: 'success', message: '删除成功!' })
        this.getList()
        this.getCompanyUser()
      })
    },
    enableAccountInfo (data, status) {
      this.$confirm(`确定要${status === 0 ? '停用' : '启用'}该员工信息, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        console.log(this.companyData);
        const params = {
          id: data.id,
          status: status,
          imListId: this.companyData.imlistid.toLowerCase(),
          user: Cookies.get('username'),
          pathurl: this.searchParams.pathurl
        }
        await api.boss.enableAccountInfo(params)
        this.$message({ type: 'success', message: '操作成功!' })
        this.getList()
        this.getCompanyUser()
      })
    },
    async getCompanyUser () {
      if (this.$store.getters.imShowId.substring(0, 2).toLowerCase() != 'tw') {
        const params = {
          imListId: this.$store.getters.imListId,
          code: 'ACCOUNT_LIMIT'
        }
        //console.log('pathurl:' + params)
        const { data } = await api.boss.serviceDetail(params)

        this.countObj = data
        this.countObj.percentage = this.countObj.consumeCount / this.countObj.permissionCount * 100
      }
    },
    // 更换超级管理员
    async getReplace (data) {
      this.isSuperAdmin = true
      this.boothDataInfo = data
      this.$router.push('/setUp/companyInformation')
    },
    getChangeDialog (type, data) {
      this[type] = data
      this.getList()
    },
    additionalPurchase () {
      /**
       * 增购逻辑判断：
       * 1、判断会员等级权限是否满足；isOnlinePurchase
       * 2、判断权限是否使用完；
       */
      if (this.countObj.isOnlinePurchase) {
        this.$router.push(`/authority/purchase/index?type=${this.countObj.permissionCode}`)
      } else {
        // 会员等级权限不足
        this.customerTitle = '当前会员级别不足，请联系销售顾问进行升级。'
        this.$refs.KFbody.customerDialogs = true
      }
    },
    permissionClose (state) {
      this.isShowPermission = state
    }
  }
}
</script>
<style lang="scss" scoped>
.staffinfo {
  width: 100%;
  height: 100%;
  padding: 0 16px 16px 16px;
  box-sizing: border-box;
  position: relative;
  overflow: auto;
  .too_body{
    @include flex(row, center, space-between);
    width: calc(100% - 32px);
    // display: inline-block;
    padding: 6px 16px;
border-radius: 4px 4px 4px 4px;
background: #FFEFEB;
margin-bottom: 24px;
.mn_butn{
  display: inline-block;
  color: #0C7FF2;
  cursor: pointer;
}
.pr16{
  padding-right: 16px;
}
  }
  .staff-nav{
    width: 100%;
    margin-bottom: 16px;
    @include flex(row, center, space-between);
    .nav-option {
      @include flex(row, center, flex-start);
      i {
        font-size: 14px;
        color: #4F5862;
        margin-right: 10px;
      }
      .option-name {
        color: #202933;
        font-size: 14px;
        margin-right: 20px ;
      }
      .option-progress {
        @include flex(row, center, center);
        // margin-right: 20px;
        .progress-num {
          font-size: 14px;
          color: #202933;
        }
      }
      ::v-deep .el-progress{
        width: 300px;
        margin-right: 20px;
        .el-progress-bar {
          border-radius: 0;
          .el-progress-bar__outer {
            border-radius: 0;
            .el-progress-bar__inner {
              border-radius: 0;
            }
          }
        }
      }
    }
  }
  .staff-search {
    width: 100%;
    margin: 16px auto;
    @include flex(row, center, space-between);
    .search-tip {
      font-size: 14px;
      color: #7E8790;
    }
    .search-input {
      ::v-deep .el-input {
        margin-right: 8px;
      }
    }
  }
  ::v-deep .el-table {
    .state {
      font-size: 14px;
      color: #7E8790;
      position: relative;
      padding-left: 10px;
      &.red {
        &::before {
          content: '';
          width: 6px;
          height: 6px;
          border-radius: 20px;
          background: #E92700;
          position: absolute;
          left: 0;
          top: 50%;
          margin-top: -2.5px;
        }
      }
      &.green {
        &::before {
          content: '';
          width: 6px;
          height: 6px;
          border-radius: 20px;
          background: #00BE1E;
          position: absolute;
          left: 0;
          top: 50%;
          margin-top: -2.5px;
        }
      }
    }
  }
}

</style>
